<template>
    <view class="shopcard" @tap="toShopIndex">
            <image :src="shopData.salonPicture" v-if="shopData.salonPicture" />
            <image src="/static/images/shopDefault.png" v-else/>
            <view class="content">
                    <view class="ul">
                            <view class="n">{{shopData.salonName}}</view>
                            <view class="a">{{shopData.salonAddress}}</view>
                            <!-- <view class="t">
                                <view class="icon">美发</view>
                            </view> -->
                    </view>
            </view>
            <view class="distance" v-if="shopData.distance" >{{shopData.distance}}</view>
    </view>    
</template>
<script>


export default {
    props:{
        shopData:{
            type:Object,
            default:{}
        }
    },
    methods:{
        toShopIndex(){
            let {salonId} = this.shopData;

            uni.navigateTo({
                url:`/pages/shopIndex/index?salonId=${salonId}`
            })

        }
    }
}
</script>

<style lang="scss">

%ShopCardStyle{
            background: #fff;
            height: 200rpx;
           
            display: flex;
            align-items: center;
            position: relative;
     
              .distance{
                        color:#333;
                        font-size:24rpx;
                        position: absolute;
                        right:20rpx;
                        top:50%;
                        transform: translateY(-50%);
                    }
           
            image{
                width: 150rpx;
                height: 150rpx;
                display: block;
                margin-left: 20rpx;
                border-radius: 75rpx;
            }

             .content{
                    width: 450rpx;
                    text-align: justify;
                    .ul{
                        padding: 10rpx 0;
                        margin-left: 20rpx;
                        text-align: left;
                    
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        &>view{
                            margin-bottom: 10rpx;
                        }
                       
                    }
                    .n{
                        color:#000;
                        font-size: 36rpx;
                    }
                    .a{
                        color:#666;
                        font-size:24rpx;
                        line-height: 26rpx;
                    }
                    .t{
                        .icon{
                       
                            padding: 0 15rpx;
                            box-sizing: border-box;
                            background: $my-main-color;
                            color:#ffff;
                            text-align: center;
                            font-size: 24rpx;
                            border-radius: 8rpx;
                            display: inline;
                        }
                       
                    }
                   
                } 
}

 .shopcard{
            margin-right: 20rpx;
            
            @extend %ShopCardStyle;
 }


 /deep/ .shopcard{
          @extend %ShopCardStyle; 
          margin: 0;
        }   




       
</style>
